<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>05-姓名案例--computed</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <h1>{{age}}</h1>
            <input type="text" v-model="age">

            <hr>

            姓：<input type="text" v-model="firstName" /><br><br>
            名：<input type="text" v-model="lastName" /><br><br>
            <h1>全名：{{ fullName  }}</h1>
            <button v-on:click="change">点击更新全名  li - si</button>

        </div>
    </body>

    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                age:18,
                firstName: "zhang",
                lastName: "san"
            },
            computed: {
                // fullName:{
                //     get(){
                //         let {firstName,lastName} = this
                //         console.log("当有人读取 fullName 值时，get方法就会调用，且返回值就是fullName 的值。");
                //         return firstName[0].toUpperCase()+firstName.slice(1)+"-"+lastName[0].toUpperCase()+lastName.slice(1)
                //     },
                //     set(value){
                //         console.log("当有人 修改 fullname 值时，set 方法自动会被调用");
                //         let arr = value.split("-")
                //         this.firstName = arr[0]
                //         this.lastName = arr[1]
                //     }
                // }

                // 计算属性简写
                fullName(){
                    let {firstName,lastName} = this
                    console.log("当有人读取 fullName 值时，get方法就会调用，且返回值就是fullName 的值。");
                    
                    return firstName[0].toUpperCase()+ firstName.slice(1) +"-"+lastName[0].toUpperCase()+ lastName.slice(1)
                }
            }
        })
        
    </script>
</html>